<template>
  <div>
    <!-- <h3 class="title">详情页面--detail</h3> -->
    <!-- <to-search></to-search> -->
    <to-back></to-back>
    <!-- <i class="back iconfont icon-back" @click="toBack()"></i> -->

    <div class="con">
      <img :src="'http://localhost:3000'+detail.img" alt />
      <!-- <h2 v-html="detail.description"></h2> -->
      <h3>名称：{{detail.goodsname}}</h3>
      <h4>款式：{{detail.specsattr}}</h4>
      <!-- 价格一旦变成真实的数据，请求是有时间的，在数据请求回来之前，detail.price是undefined，那么过滤器就会报错；
为了避免报错，我们在数据请回来之后再渲染，选择条件渲染。
      -->
      <h4 v-if="detail.price">价格：{{detail.price|filterPrice}}</h4>
    </div>
    <!-- <hr /> -->
    <!-- <h3 class="title">相关推荐</h3>
    <router-link class="lianxiang" to="/detail/2">联想小新</router-link>
    <router-link to="/detail/5">华为book</router-link>-->
    <!--详情1条详情2 在beforeRouteUpdate做操作 -->

    <!-- <div class="add">
      <button @click="addShop">加入购物车</button>
    </div>-->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" @click="toShop" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addShop" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
// 引入请提示
import { Toast } from "vant";
// import axios from "axios";
import { reqDetail, reqAddShop } from "../../http/http";
export default {
  // 初始化数据
  data() {
    return {
      detail: {}
    };
  },
  methods: {
    //加入购物车
    toShop() {
      // console.log("111");
      this.$router.push("/index/shop");
    },
    addShop() {
      // console.log("111");
      // 发请求
      reqAddShop({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        goodsid: this.$route.params.id,
        num: 1
      }).then(res => {
        console.log(res);
        //判断登录成功
        if (res.data.code === 200) {
          // 成功
          Toast(res.data.msg);
        } else {
          // 掉线了
          Toast(res.data.msg);
          if (res.data.msg == "登录已过期或访问权限受限") {
            // 清除用户信息
            localStorage.removeItem("user");
            //跳到登录页面
            this.$router.push("/login");
          }
        }
      });
    }
  },
  mounted() {
    // console.log("======detail.mounted=======");
    // console.log(this.$route.params.id);
    // 接下来发aja请求
    reqDetail({
      id: this.$route.params.id
    }).then(res => {
      // console.log(res);
      this.detail = res.data.list[0];
    });
  },
  // 如果是从list页面访问详情页面，则不可以，其他页面都可以
  beforeCreated() {
    // console.log("detail  创建之前");
  },
  beforeUpdate() {
    // console.log("detail 更新之前");
  },
  // 组件进来之前:没有this
  /* beforeRouteEnter比beforeCreate还要早，所以这个时候是没有this.
  如果我们需要在这个钩子函数里面取到当前路由的信息，不可以使用this.$route,而要使用to代替
  */
  beforeRouteEnter(to, from, next) {
    // console.log("组件内部守卫：beforeRouteEnter");
    // console.log(this); //undefined
    // console.log(to.params);
    // console.log(to.params.id);
    //判断来的路由是否是list，是就去个人中心；否则就允许访问
    /* if (from.path == "/list") {
      next("/index/login");
    } else {
      next();
    } */
    next();
  },
  // 路由离开之前
  /* 
   在项目中详情1跳转到详情2，是不会触发销毁的，所以mounted是不会触发的，这个时候$route的改变并没有引起beforeUpdate执行，所以在beforeUpdate也不能发起新数据的请求
  $route的改变会触发beforeRouteUpdate，所以在这个里面发起新数据的请求，但是这里面的this.$route是旧的路径的路由信息，
  如果要新的路由信息，使用to.
  */
  beforeRouteUpdate(to, from, next) {
    // console.log("==detail.beforeRouteUpdate===");
    // console.log("发起是商品请求：" + to.params.id);
    reqDetail({
      id: this.$route.params.id
    }).then(res => {
      // console.log(res);
      this.detail = res.data.list[0];
    });
    next();
  },
  //  离开之前
  beforeRouteLeave(to, from, next) {
    // console.log("离开了");
    next();
  }
};
</script>

<style scoped>
a {
  margin: 0.3rem;
  display: inline-block;
}
.con {
  /* padding: 0 0.1rem; */
  width: 100vw;
  height: 6.4rem;
  margin-top: 0.8rem;
}
img {
  width: 100%;
  height: 100%;
}
.con h3 {
  height: 0.64rem;
  line-height: 0.64rem;
  font-size: 0.36rem;
  color: #f06d4f;
}
.data-v-5ee9087b p img {
  width: 2.2rem;
  height: 2.2rem;
}
.back {
  font-size: 0.24rem;
  color: #000;
  /* background-color: orange; */
  position: fixed;
  left: 0.1rem;
  top: 0.8rem;
}
.icon-back {
  color: #ff4400;
  font-size: 0.5rem;
}
.add {
  text-align: center;
}
</style>